<template>
  <div>
<!--    <el-button @click="draw">刷新</el-button>{{msg}}-->
    <div ref="pane1" style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;">
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'QX',
  props: ['chart_option'],
  watch: {
    chart_option: {
      handler(newVal, oldVal) {
        console.log('qx watch chart_option------------')
        this.draw();
      },
      deep: true
    }
  },
  created() {
    console.log('qx created---------------')
  },
  mounted() {
    this.draw();
  },
  data() {
    return {
    }
  },
  methods: {
    draw() {
      let chartDom = this.$refs.pane1;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.chart_option);
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
